<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #my-chart {
            position: absolute;
            top: 0;
            left: 0;
            width: 1920px;
            height: 1080px;
            z-index: 2;
            background-color: black;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="my-chart"></div>

<script>
    fetch('../record_data.json')
        .then(response => response.json())
        .then(data => {
            createChart(data);
        });

    function createChart(data) {
        let maxSpeed = 0;
        let maxPower = 0;
        let maxAlt = 0;
        let minAlt = 8848.43;

        for (let i = 0; i < data.length; i++) {
            const item = data[i];
            if (item.p > maxPower) {
                maxPower = item.p;
            }
            if (item.s > maxSpeed) {
                maxSpeed = item.s;
            }
            if (item.a > maxAlt) {
                maxAlt = item.a;
            }
            if (item.a < minAlt) {
                minAlt = item.a;
            }
        }

        const allPathData = data.map(item => [item.lo, item.la]);
        const allAltData = data.map(item => [item.t, item.a]);

        const echartContainer = document.getElementById('my-chart');
        let chartHeight = echartContainer.offsetHeight;
        const myChart = echarts.init(echartContainer, null, {renderer: 'svg'});

        function autoFontSize(scale) {
            let width = echartContainer.offsetWidth;
            let newFontSize = Math.round(width / scale);
            return newFontSize;
        }

        let currentIndex = 0;

        myChart.setOption({animation: true});
        myChart.setOption(
            {
                grid: [
                    {
                        left: '75%',
                        top: '5%',
                        width: '25%',
                        height: '25%'
                    },
                    {
                        left: '-0.2%',
                        top: '75%',
                        width: '25%',
                        height: '25%'
                    }
                ],
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        name: 'Longitude',
                        show: false
                    },
                    {
                        type: 'category',
                        data: [],
                        gridIndex: 1,
                        show: false
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        name: 'Latitude',
                        show: false,
                    },
                    {
                        type: 'value',
                        gridIndex: 1,
                        axisLabel: {
                            fontSize: autoFontSize(75),
                            fontWeight: 'bold',
                        },
                        splitLine: {
                            show: false
                        },
                        min: minAlt,
                        max: maxAlt,
                        show: false
                    },
                ],
                series: [
                    {
                        name: 'Path',
                        type: 'line',
                        data: allPathData,
                        lineStyle: {
                            width: autoFontSize(300),
                            color: "white",
                        },
                        showSymbol: false,
                        animation: false,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                    },
                    {
                        name: 'Ball',
                        type: 'effectScatter',
                        coordinateSystem: 'cartesian2d',
                        z: 100,
                        data: [allPathData[0]],
                        symbolSize: autoFontSize(100),
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        itemStyle: {
                            color: '#58D9F9'
                        },
                    },
                    {
                        data: allAltData,
                        type: 'line',
                        itemStyle: {
                            color: 'white'
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: 'rgba(255,255,255,0.5)',
                        },
                        smooth: true,
                        animation: false,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        showSymbol: false,
                    },
                    {
                        name: 'Altitude Ball',
                        type: 'effectScatter',
                        coordinateSystem: 'cartesian2d',
                        z: 100,
                        data: [allAltData[0]],
                        symbolSize: autoFontSize(100),
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        itemStyle: {
                            color: 'white'
                        },
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (param) {
                                    return param.data[1].toFixed(2) + 'm';
                                },
                                textStyle: {
                                    color: 'white',
                                    fontWeight: 'bold',
                                    fontSize: autoFontSize(80)
                                }
                            }
                        }
                    },
                    {
                        type: "gauge",
                        center: [
                            "90%",
                            "95%"
                        ],
                        radius: "30%",
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: maxSpeed,
                        splitNumber: 10,
                        itemStyle: {
                            color: "#58D9F9",
                            shadowColor: "rgba(0,138,255,0.45)",
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: autoFontSize(200)
                        },
                        pointer: {
                            icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
                            length: "65%",
                            width: autoFontSize(200),
                            offsetCenter: [
                                0,
                                "-20%"
                            ]
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: autoFontSize(200)
                            }
                        },
                        axisTick: {
                            splitNumber: 2,
                            length: autoFontSize(250),
                            lineStyle: {
                                width: autoFontSize(1000),
                                color: "#fff"
                            }
                        },
                        splitLine: {
                            length: autoFontSize(125),
                            lineStyle: {
                                width: autoFontSize(750),
                                color: "#fff"
                            }
                        },
                        axisLabel: {
                            distance: autoFontSize(100),
                            color: "#58D9F9",
                            fontSize: autoFontSize(100),
                            fontWeight: 'bold',
                            formatter: function (value) {
                                return value.toFixed(0);
                            }
                        },
                        title: {
                            offsetCenter: [0, '0%'],
                            fontSize: autoFontSize(50),
                            fontWeight: "bolder",
                            color: "#58D9F9",
                        },
                        detail: {
                            backgroundColor: "#ffffff00",
                            width: "60%",
                            lineHeight: 20,
                            height: 20,
                            offsetCenter: [
                                0,
                                "-25%"
                            ],
                            valueAnimation: true,
                            fontSize: autoFontSize(50),
                            fontWeight: "bolder",
                            color: "#58D9F9",
                            formatter: function (value) {
                                return value.toFixed(2);
                            }
                        },
                        data: [
                            {
                                value: 0.00,
                                name: 'km/h'
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '90%'],
                        radius: "20%",
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: maxPower,
                        splitNumber: 10,
                        itemStyle: {
                            color: '#58D9F9'
                        },
                        progress: {
                            show: true,
                            width: autoFontSize(192)
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                width: autoFontSize(192)
                            }
                        },
                        axisTick: {
                            distance: -autoFontSize(76),
                            splitNumber: autoFontSize(384),
                            lineStyle: {
                                width: autoFontSize(720),
                                color: '#58D9F9'
                            }
                        },
                        splitLine: {
                            distance: -autoFontSize(64),
                            length: autoFontSize(384),
                            lineStyle: {
                                width: autoFontSize(720),
                                color: '#58D9F9'
                            }
                        },
                        axisLabel: {
                            distance: -autoFontSize(48),
                            color: '#58D9F9',
                            fontSize: autoFontSize(75),
                            fontWeight: 'bold',
                            formatter: function (value) {
                                return value.toFixed(0);
                            }
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            offsetCenter: [0, '-15%'],
                            fontSize: autoFontSize(32),
                            fontWeight: 'bolder',
                            formatter: '{value}W',
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    },
                ],
                graphic: [
                    {
                        type: 'text',
                        left: '15px',
                        top: chartHeight / 2 - autoFontSize(24) - autoFontSize(75),
                        style: {
                            text: 'BPM',
                            fill: 'rgba(255,255,255,0.8)',
                            fontSize: autoFontSize(75),
                            textAlign: 'left',
                            fontWeight: "bolder",
                            textVerticalAlign: 'middle'
                        }
                    },
                    {
                        type: 'text',
                        left: '10px',
                        top: chartHeight / 2 - autoFontSize(24),
                        style: {
                            text: '0',
                            fill: 'rgba(255,255,255)',
                            fontSize: autoFontSize(16),
                            textAlign: 'left',
                            textVerticalAlign: 'middle'
                        }
                    },
                    {
                        type: 'text',
                        left: '15px',
                        top: chartHeight / 2 + autoFontSize(24) - autoFontSize(75),
                        style: {
                            text: 'RPM',
                            fill: 'rgba(255,255,255,0.8)',
                            fontSize: autoFontSize(75),
                            textAlign: 'left',
                            fontWeight: "bolder",
                            textVerticalAlign: 'middle'
                        }
                    },
                    {
                        type: 'text',
                        left: '10px',
                        top: chartHeight / 2 + autoFontSize(24),
                        style: {
                            text: '0',
                            fill: 'rgba(255,255,255)',
                            fontSize: autoFontSize(16),
                            textAlign: 'left',
                            textVerticalAlign: 'middle'
                        }
                    },
                    {
                        type: 'text',
                        left: autoFontSize(48) + 'px',
                        top: chartHeight - autoFontSize(32) - chartHeight / 16,
                        style: {
                            text: '-49.99%',
                            fill: 'rgba(255,255,255)',
                            fontSize: autoFontSize(32),
                            textAlign: 'left',
                            textVerticalAlign: 'middle'
                        }
                    },
                ]
            });

        setInterval(function () {
            if (currentIndex < allPathData.length) {
                let item = data[currentIndex];
                let powerColor = item.p > (maxPower * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
                let speedColor = item.s > (maxSpeed * 0.8) ? 'rgb(255, 70, 131)' : '#58D9F9';
                myChart.setOption({
                    graphic: [
                        {},
                        {
                            style: {
                                text: item.h,
                            }
                        },
                        {},
                        {
                            style: {
                                text: item.c,
                            }
                        },
                        {},
                    ],
                    series: [
                        {},
                        {
                            data: [allPathData[currentIndex]]
                        },
                        {},
                        {
                            data: [allAltData[currentIndex]]
                        },
                        {
                            axisTick: {
                                lineStyle: {
                                    color: speedColor
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: speedColor
                                },
                            },
                            axisLabel: {
                                color: speedColor
                            },
                            itemStyle: {
                                color: speedColor
                            },
                            detail: {
                                color: speedColor
                            },
                            title: {
                                color: speedColor
                            },
                            data: [
                                {
                                    value: item.s,
                                    name: 'km/h'
                                }
                            ]
                        },
                        {
                            axisTick: {
                                lineStyle: {
                                    color: powerColor
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: powerColor
                                },
                            },
                            axisLabel: {
                                color: powerColor
                            },
                            itemStyle: {
                                color: powerColor
                            },
                            detail: {
                                color: powerColor
                            },
                            data: [
                                {
                                    value: item.p
                                }
                            ]
                        }
                    ]
                });
                currentIndex++;
            }
        }, 1000);
    }

</script>
</body>
</html>